<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2018/7/25
  Time: 11:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <style type="text/css">
      .big{
        height:300px;
        width:300px;
        border:1px solid black;
      }
      #up{
        height:200px;
        width:300px;
        border-bottom:1px solid black;
      }
      /*.down{*/
        /*height:40px;*/
        /*width:300px;*/
      /*}*/
    </style>

    <script type="text/javascript">

        var obj,image;
        var tm=0;
        var timeInterval="";
        window.onload=function()
        {
            onloadPicture();
            // changeColor();
            // onpicture();

        }
        //当鼠标点击到某个具体的数字时，就定位到当前图片，停止不动
        // function changeColor()
        // {
        //     var trs=document.getElementsByTagName("td");
        //     trs[0].onmouseover=function()
        //     {
        //         this.style.backgroundColor="#ccc";
        //         trs[1].style.backgroundColor="white";
        //         trs[2].style.backgroundColor="white";
        //         image.setAttribute("src","img/3.png");
        //         clearInterval(timeInterval);
        //     }
        //     trs[0].onmouseout=function()
        //     {
        //         this.style.backgroundColor="white";
        //         timeInterval=setInterval("changePicture()",1000);
        //     }
        //     trs[1].onmouseover=function()
        //     {
        //         this.style.backgroundColor="#ccc";
        //         trs[0].style.backgroundColor="white";
        //         trs[2].style.backgroundColor="white";
        //         image.setAttribute("src","img/emo1.jpg");
        //         clearInterval(timeInterval);
        //     }
        //     trs[1].onmouseout=function()
        //     {
        //         this.style.backgroundColor="white";
        //         timeInterval=setInterval("changePicture()",1000);
        //     }
        //     trs[2].onmouseover=function()
        //     {
        //         this.style.backgroundColor="#ccc";
        //         trs[0].style.backgroundColor="white";
        //         trs[1].style.backgroundColor="white";
        //         image.setAttribute("src","img/1.png");
        //         clearInterval(timeInterval);
        //     }
        //     trs[2].onmouseout=function()
        //     {
        //         this.style.backgroundColor="white";
        //         timeInterval=setInterval("changePicture()",1000);
        //     }
        //
        // }
        //加载图片
        function onloadPicture()
        {
            obj=document.getElementById("up");
            image=document.createElement("img");
            timeInterval=setInterval("changePicture()",1000);
            obj.appendChild(image);
        }
        //根据时间来判断该放哪一张图片
        function changePicture()
        {
            // var trs=document.getElementsByTagName("td");
            tm=tm+1000;
            if(tm%3000==1000)
            {
                image.setAttribute("src","img/emo1.jpg");
                // trs[0].style.backgroundColor="#ccc";
                // trs[1].style.backgroundColor="white";
                // trs[2].style.backgroundColor="white";
            }
            else if(tm%3000==2000)
            {
                image.setAttribute("src","img/gyicon.jpg");
                // trs[0].style.backgroundColor="white";
                // trs[1].style.backgroundColor="#ccc";
                // trs[2].style.backgroundColor="white";
            }
            else if(tm%3000==0)
            {
                image.setAttribute("src","img/hotel.jpg");
                // trs[0].style.backgroundColor="white";
                // trs[1].style.backgroundColor="white";
                // trs[2].style.backgroundColor="#ccc";
            }
        }

        // //当鼠标移到图片上时，就停止不动
        // function onpicture()
        // {
        //     var divs=document.getElementById("up");
        //     divs.onmouseover=function()
        //     {
        //         clearInterval(timeInterval);
        //     }
        //     divs.onmouseout=function()
        //     {
        //         timeInterval=setInterval("changePicture()",1000);
        //     }
        // }

    </script>
  </head>
  <body>
  this is a test web page,if it show,it works;<br/><br/><br/>
  <div class="big">
    <div id="up"></div>
    <%--<div class="down">--%>
      <%--<table border="1px solid black" width="100%">--%>
        <%--<tbody>--%>
        <%--<tr>--%>
          <%--<td>1</td>--%>
          <%--<td>2</td>--%>
          <%--<td>3</td>--%>
        <%--</tr>--%>
        <%--</tbody>--%>
      <%--</table>--%>
    <%--</div>--%>
  </div>
  </body>
</html>
